// 定义@vw=3.75vw
@vw: 3.75vw;

*{
    padding: 0;
    margin: 0;
}

body{
    background: #f9fafb;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
}
// 头部
.top{
    position: fixed;
    width: 100%;
    height: (50/@vw);
    top: 0;
    left: 0;
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    img{
        width: (200/@vw);
    }
}
// 底部
.btm{
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: (330/@vw);
    height: (45/@vw);
    bottom: (20/@vw);
    background-color: white;
    border-radius: (30/@vw);
    img{
        width: (37/@vw);
    }
    p{
        font-size: (14/@vw);
        width: (230/@vw);
        // background: blue;
        text-indent: 1em;
    }
    .right{
        width: (30/@vw);
        height: (30/@vw);
        border-radius: 50%;
        background-color: #f2f3f5;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: (15/@vw);
        cursor: pointer;
    }
}
// 下载按钮
.xz{
    width: (80/@vw);
    height: (30/@vw);
    background: #ffe31a;
    border-radius: (10*@vw);
    font-size: (10/@vw);
    border: 0;
    // margin: auto 0;
    cursor: pointer;
}
// 搜索栏
.ss{
    display: flex;
    justify-content: center;
    align-items: center;
    width: (330/@vw);
    height: (30/@vw);                   
    background: #f1f4f5;                                    
    border-radius: (20/@vw);       
    margin-top: (60/@vw);
    margin-bottom: (10/@vw);
    // text-align: center;
    // line-height: (30/@vw);
    span{
        font-size: (15/@vw);     
        color: #a1a4b3;
    }
}
// 行一
.h1{
    width: (330/@vw);
    // height: (130/@vw);
    img{
        width: 100%;
        border-radius: (5/@vw);
    }
}
// 行二
.h2{
    margin-top: (10/@vw);
    width: (330/@vw);
    height: (40/@vw);
    display: flex;
    justify-content: space-between;
    align-items: center;
    p{
        font-size: (15/@vw);
        font-weight: 700;
        color: #333333;
    }
    a{
        font-size: (11/@vw);
        text-decoration: none;
        color: #a1a4b3;
    }
}
// 行三
.h3{
    margin-top: (10/@vw);
    display: flex;
    justify-content: space-between;
    width: (330/@vw);
    height: (100/@vw);
    background-color: white;
    border-radius: (5/@vw);
    .h3-left{
        width: (100/@vw);
        height: 100%;
        img{
            width: 100%;
            border-radius: (5/@vw);
        }
    }
    .h3-right{
        display: flex;
        // flex-direction: column;
        flex-wrap: wrap;
        align-items: space-around;

        width: (200/@vw);
        height: 100%;
        // background: blue;
        p{
            font-size: (10/@vw);
            width: 100%;
            
        }
        h1{
            font-size: (15/@vw);
            font-weight: 500;
            color: #a1a4b3;
        }
    }
}
// 行四
.h4{
    display: flex;
    justify-content: space-between;
    width: (330/@vw);
    height: (140/@vw);
    // background: pink;
    margin-top: (10/@vw);
}
// 行五
.h5{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    width: (330/@vw);
    height: (140/@vw);
    // background: pink;
    margin-top: (10/@vw);
}
.h4-1{
    width: (100/@vw);
    height: (140/@vw);
    z-index: 2;
    // background-color: aquamarine;
    img{
        width: (100/@vw);
        border-radius: (10/@vw);
    }
    p{
        font-size: (13/@vw);
    }
}